<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入巡检计划名称" v-model="planName" size="small" style="width: 180px;" class="mRight10">
          </el-input>
          <el-select v-model="planState" placeholder="请选择计划状态" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in inspPlanState" :key="item.id" :label="item.plan_state" :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="inspGroup" placeholder="请选择巡检小组" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in inspGroups" :key="item.id" :label="item.group_name" :value="item.id">
            </el-option>
          </el-select>
          <!--          <el-select v-model="taskStatus" placeholder="请选择巡检路线" size="small" style="width: 140px;" class="mRight10"
                     clearable>
            <el-option v-for="item in taskStatusOpts1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>-->
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            :default-time="['12:00:00']"
            style="width: 350px"
            v-model="taskTime"
            type="daterange"
            size="small"
            range-separator="——"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="mRight10"
            clearable
          >
          </el-date-picker>
          <el-button type="primary" size="small" @click="queryForPage(1)">
            查询
          </el-button>
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">新增</el-button>
          <el-button type="primary" size="small">
            计划复制
          </el-button>
          <el-button type="primary" size="small">
            生成任务
          </el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table :data="tableData" stripe :header-cell-style="{
          background: '#8595B9',
          color: '#fff',
          height: '44px',
        }" max-height="660px">
          <el-table-column prop="planName" label="计划名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="startTime" label="起始时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="endTime" label="终止时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="planFrequency" label="计划频率" show-overflow-tooltip></el-table-column>
          <el-table-column prop="planState" label="计划状态" show-overflow-tooltip></el-table-column>
          <el-table-column prop="inspGroup" label="巡检小组" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="修改">
                <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row.id)">
                </el-button>
              </el-tooltip>
              <el-tooltip content="结束任务">
                <el-button type="text" icon="el-icon-circle-check" @click="handelTaskStatus(scope.row.id)">
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important;"
                           @click="handelDelete(scope.row.id)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination background layout="prev, pager, next"
                       :current-page.sync="currentPage"
                       :hide-on-single-page="false"
                       @current-change="handlePageChange"
                       :page-size="pageSize"
                       :total="recordsTotal">
        </el-pagination>
      </div>

    </div>

    <!-- 新增/编辑计划-->
    <AddInspectionPlan ref="addInspTaskChild" @closeAddInspTask="handleClose"></AddInspectionPlan>
  </div>
</template>
<script>
  import AddInspectionPlan from "./components/addInspectionPlan";

  export default {
    data() {
      return {
        planName: '',
        planState: '',
        inspGroup: '',
        inspRouteName: '',
       startTime: '',
        endTime: '',
        tableData: [],
        recordsTotal: 0,
        currentPage: 1,
        pageSize: 14,
        inspPlanState: [],
        inspGroups: [],
        taskTime: [],







      };
    },
    created() {
      this.queryForPage(1);
    },
    methods: {
      queryForPage(pageIndex) {
        if (pageIndex && pageIndex === 1) {
          this.currentPage = 1
        }

        const _params = {
          planName: this.planName,
          planState: this.planState,
          inspGroup: this.inspGroup,
          inspRouteName: this.inspRouteName,
          startTime: this.startTime,
          endTime: this.endTime,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
        }


        if (this.taskTime && this.taskTime.length > 0) {
          _params.startTime = this.taskTime[0] || ''
          _params.endTime = this.taskTime[1] || ''
        }
        //巡检计划分页查询
        this.$api.insp.inspPlan(_params).then((response) => {
          if(response.data.code ===200){
            if(response.data.data && response.data.data.rows.length > 0){
              this.tableData = response.data.data.rows.map((item, index) => ({
                id: item.id,
                planName: item.planName ,
                startTime: item.startTime,
                endTime: item.endTime,
                planFrequency: item.planFrequency,
                planState: item.planState,
                inspGroup: item.inspGroup,
                createTime: item.createTime
              }))
            } else {
              this.tableData = []
            }
            this.recordsTotal = response.data.data.total
            console.log(this.recordsTotal);
          }
        })
        //巡检分页查询页面各下拉框
        this.$api.insp.findPageDropBox().then((response) => {
          if(response.data.code ===200){
            //计划状态
            this.inspPlanState = response.data.data.inspPlanState
            //巡检小组
            this.inspGroups = response.data.data.inspGroups
          }
        })
      },

      /*分页的handlePageChange*/
      handlePageChange(currentPage) {
        this.currentPage = currentPage;
        this.queryForPage();
      },
      //新增计划
      handleAdd() {
        this.$refs.addInspTaskChild.add()
      },

      handleClose() {
        this.queryForPage(1)
      },
      //根据id删除巡检计划
      handelDelete(val) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$api.insp.deleteInspPlanById({id:val}).then((response) => {
              if (response.data.code === 200) {
                this.$vs.notify({
                  text: '删除成功',
                  color: 'success',
                  icon: 'success',
                })
                let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize)
                if (this.currentPage > maxPage) {
                  this.currentPage = maxPage
                }
                this.handlePageChange(this.currentPage)
              } else {
                this.$vs.notify({
                  text: '删除失败',
                  color: 'danger',
                })
              }
            })
          })
          .catch(() => {
            this.$vs.notify({
              text: '已取消删除',
              color: 'primary',
            })
          })
      },
    },












    components: {
      AddInspectionPlan,
    },
    watch: {
      '$route'(to, from) {
        this.queryForPage(1);
      }
    },

    /*methods: {
      handleAdd() {
        this.$refs.addInspTaskChild.add();
      },
      handelDelete(val) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.insp.deleteTask(val).then(response => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: "success",
                icon: "success"
              })
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize);
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage);
            } else {
              this.$vs.notify({
                text: "删除失败",
                color: "danger"
              })
            }
          })
        }).catch(() => {
          this.$vs.notify({
            text: "已取消删除",
            color: "primary"
          })
        });
      },
      handelEdit(val) {
        this.$refs.addInspTaskChild.edit(val);
      },
      handelTaskStatus(val) {
        this.$confirm('此操作将结束任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.insp.editTaskStatus(val, 2).then(response => {
            if (response.data.success) {
              this.$vs.notify({
                text: '任务结束成功',
                color: "success",
                icon: "success"
              })
              this.queryForPage(1);
            } else {
              this.$vs.notify({
                text: "任务结束失败",
                color: "danger"
              })
            }
          })
        }).catch(() => {
          this.$vs.notify({
            text: "已取消",
            color: "primary"
          })
        });
      },
      queryForPage(pageIndex) {
        let _userInfo = JSON.parse(localStorage.getItem("userInfo"));
        if (pageIndex && pageIndex === 1) {
          this.currentPage = 1;
        }
        const _params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          data: {
            name: this.taskName,
            staFlag: this.taskStatus,
            createType: this.taskType,
            sdt: this.taskTime || '',
            userId: _userInfo['userid'] || ''
          }
        }
       /!* this.$api.insp.queryTaskPage(_params).then(response => {
          if (response.data.success) {
            this.tableData = response.data.data || [];
            this.recordsTotal = response.data.recordsTotal;
          }
        });*!/
      },
      handlePageChange(currentPage) {
        this.currentPage = currentPage;
        this.queryForPage();
      },
      handleClose() {
        this.queryForPage(1);
      },
      inspPersonText(list) {
        let _text = '';
        list.forEach((item, index) => {
          if (!index) {
            _text += item.userName
          } else {
            _text += `、${item.userName}`
          }
        });
        return _text;
      },
      inspStandardText(type) {
        switch (type) {
          case 0:
            return '城市桥梁';
          case 1:
            return '道路桥梁';
        }
      },
      taskTypeText(type) {
        switch (type) {
          case 1:
            return '模板任务';
          case 2:
            return '定时任务';
          case 3:
            return '快速任务';
          case 4:
            return '临时任务';
        }
      },
      inspTypeClass(type) {
        switch (type) {
          case 0:
            return 'inspTypeA';
          case 1:
            return 'inspTypeB';
          case 2:
            return 'inspTypeC';
        }
      },
      inspTypeText(type) {
        switch (type) {
          case 0:
            return '日常巡检';
          case 1:
            return '定期巡检';
          case 2:
            return '特殊巡检';
        }
      },
      taskStatusClass(type) {
        switch (type) {
          case 1:
            return 'planStatusA';
          case 2:
            return 'planStatusB';
          case 3:
            return 'planStatusC';
          case 4:
            return 'planStatusD';
          case 5:
            return 'planStatusB';
          case 6:
            return 'planStatusC';
        }
      },
      taskStatusText(type) {
        switch (type) {
          case 0:
            return '计划中';
          case 1:
            return '进行中';
          case 2:
            return '已完成';
        }
      },

      handleTabDetailClick(tab, event) {
        this.activeDetailName = tab.name;
      },

    },*/
  };

</script>
<style scoped lang="scss">
  @import './insp.scss';

  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table th {
    font-weight: 500;
    color: #fff;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #444;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F1F5FC;
  }

  /deep/.el-table__expanded-cell {
    padding: 20px !important;
  }

  /deep/.el-button--mini.insp-task-addBtn {
    padding: 6px;
    font-size: 18px;
    font-weight: bolder;
  }



  /deep/.insp-plan-detailTabs .el-tabs__header {
    padding: 0;
    margin: -20px 0 0;
    background: #fff;
  }

  /deep/.insp-plan-detailTabs .el-tabs__item {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    position: relative;

    text-align: center;
  }

  /deep/.insp-plan-detailTabs .el-tabs__active-bar {
    width: 12px !important;
    background-color: #327BDC;

    left: 28px;
    margin-left: -6px;
  }

  /deep/.insp-plan-detailTabs .el-tabs__content {
    min-height: 250px;
  }

  /deep/.el-tabs__item.is-active {
    color: #327BDC;
  }

</style>
